<template>

      <div ref="ec" style="min-height:300px;overflow: hidden;"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    // console.log(this.$refs)
    this.$nextTick(()=>{
      this.initEcharts();
    })
    
  },
  methods: {
    /**
     * 生成echarts
     */
    initEcharts() {
      var option = {
        
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: "60%",
            center: ["60%", "45%"],
            data: [
              { value: 335, name: "信息技术业" },
              { value: 310, name: "建筑业" },
              { value: 234, name: "制造业" },
              { value: 135, name: "房地产业" },
              { value: 1548, name: "社会服务业" }
            ],
            minAngle: 15 /*最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互*/,
            selectedMode: "single",
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.option = option;
      this.myChart = this.$echarts.init(this.$refs.ec);
      this.myChart.setOption(option);
    }
  },
  created() {}
};
</script>
